<template>
    <div class="ACcontainer">
        <!-- {{begonia}} -->
        <van-index-bar :index-list="indexList">
            <div v-for="(item,key) in allCities ">
                <van-index-anchor :index="key" />
                <van-cell  v-for = "city in item" :title="city.name" @click="handleClick(city.name)"/>
            </div>   
         </van-index-bar>
    
    </div>
</template>

<script setup>
import { computed, inject, onMounted } from 'vue';

const $emit = defineEmits(['selectCity'])
// 当城市被点击时的回调
function handleClick(name) {
    $emit('selectCity', name)
}



// 通过计算属性拿到城市的首字母
const indexList = computed(()=>{
    return Object.keys(allCities.value)
})

const allCities = inject('allCities')
onMounted(()=>{
})
</script>
 
<style scoped>
   .ACcontainer {
        margin: 20px;
    }

    .van-cell{
        cursor: pointer;
    }

</style>